<%- include('../layout/head.ejs', {pageConf})%>

<div id="detail">

  <div class="detail-wrap">
    <div class="control-header">
      <div class="previous">
        &lt;
      </div>
      <div class="cart">
        <i>cart</i>
      </div>
    </div>

    <div class="banner" style="height: 56vh; overflow: hidden; text-align: center;">
      <a href="javascript:;" class="gallary-link">
        <!-- 轮播图 -->
        <div class="swiper-wrap" style="width: 100vw;">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img
                  src=" https://img.alicdn.com/imgextra/i1/1132952335/O1CN01zuIZ7p1T7TMiQj7D2_!!1132952335.jpg_760x760Q50s50.jpg_.webp"
                  alt="点击查看商品详情" style="height: 56vh;">
              </div>
              <div class="swiper-slide">
                <img
                  src="https://img.alicdn.com/bao/uploaded/i3/1132952335/O1CN01DDi9fD1T7TORBOWd1_!!1132952335.jpg_760x760Q50s50.jpg_.webp"
                  alt="点击查看商品详情" style="height: 56vh;">
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" style="color: #fff"></div>
            <div class="swiper-button-next" style="color: #fff"></div>
          </div>
        </div>
        <script>
          var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            speed: 300,
            grabCursor: true,
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            }
          })
        </script>
      </a>
    </div>
    <!-- end -->

    <!-- 商品信息 -->
    <div class="p-info-wrap">
      <div class="p-info">
        <div class="p-price">
          <span class="sign">￥</span>
          <span class="price"><%= prod.pPrice%></span>
        </div>
        <div class="p-name">
          商品名：<%= prod.pName%>
        </div>
        <div class="p-purchased <%= prod.pPurchased == 0 ? 'display-none': ''%>">
         <span><%= prod.pPurchased%></span>人已购买
        </div>
        <div class="p-reserve">
          库存数：<%= prod.pReserve%>
        </div>
      </div>
      <div class="p-introdution">
        商品介绍：<%= prod.pIntro%> 这里的商品介绍要尽量详尽，包括颜色，商品参数，保修服务等等
      </div>
      <div class="p-sort">
        商品所属类别：<%= prod.pBigSort%>类 - <%= prod.pDetailSort%>
      </div>
    </div>
    <!-- end -->

    <!-- 底部功能导航 -->
    <div class="tab">
      <div class="tools">
        <div class="collect">收藏</div>
        <div class="send-message">发消息</div>
      </div><div class="call-host js-call-host">
        语音联系商家
      </div><div class="add-to-cart">
        添加购物车
      </div>
    </div>
    <!-- end -->
    
  </div>

  <%- include('../layout/foot.ejs', { pageConf })%>